<template>
  <div class="mine">
      <Head title="个人中心" ></Head>
      <div class="mine-top">
          <div class="flex jcsb aic">
              <img :src="require('@/assets/images/photo.png')" class="avatar-icon" alt="">
              <p class="myinfo" v-if="isLogin">
                <template v-if="userInfo">
                  <span class="c-green" >{{userInfo.username}} </span> 
                  <span>{{userInfo.phone}}</span>
                </template>
              </p>
              <p class="nick-name" v-else @click="gotoPage('login')"> 立即登录 </p>
          </div>
      </div>
      <ul class="my-order-tab">
        <li data-enter-time="1627028128" data-click-fun="track_f_574309">
          <img src="" width="26px" height="26px" alt="">
          <span class="mint-badge is-primary is-size-small" style="display: none;">99+ </span>
          <div class="common-p">电影订单</div>
          </li>
        <li data-enter-time="1627028128" data-click-fun="track_f_531912">
          <img src="" width="26px" height="26px" alt="">
          <div class="common-p">商品订单</div>
          </li>
      </ul>
      <div class="mine-list">
        <van-cell-group>
             
             <van-cell title="优惠券" icon="fire-o" is-link/>
             <van-cell title="组合红包" icon="gem"  is-link/>
              <template v-if="userInfo" >
                 <van-cell title="历史记录" icon="user-o" value="查看" is-link />
                <van-cell title="余额" icon="gold-coin" value="288" is-link />
                <van-cell title="点赞" icon="star-o" value="4" is-link />
                <van-cell title="收藏" icon="like-o" value="10" is-link  />
                <van-cell title="修改密码" :to="{name:'changepass'}" icon="apps-o"  is-link />
              </template>
             <van-cell title="清除缓存" @click="clearAll" icon="lock"  is-link />
             <van-cell title="设置" icon="setting-o" value="" is-link />

        </van-cell-group>

        <div class="logout" v-if="userInfo"  >
            <van-button @click="logout" block v-shuibowen class="logout-btn">退出登录</van-button>
        </div>

        <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click.stop>
             <van-circle  
              v-if="show"
              class="myend" 
              size="300px" 
              v-model="currentRate" 
              :rate="rate" 
              :speed="20" 
              :text="text" />
          </div>
        </van-overlay>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: localStorage.phone,
      show:false,
      currentRate:0,
      rate:100
    };
  },
  watch:{
    currentRate(v){
      if(v==100){
        this.$toast("缓存清除成功")
        this.show = false ;
        this.currentRate = 0
      }
    }
  },
  computed:{
    text(){
       return this.currentRate.toFixed(0) + "%" 
    }
  },
  methods:{
    clearAll(){
        
        this.show = true
    },
    logout(){
        localStorage.removeItem("phone")
        this.changeUserInfo(null)
        this.isLogin = false;
    }
  },
  mounted() {
    // 已经登录 有  phone 就可以获取用户信息
    if (this.isLogin) {
      this.$http
        .finduser({
          phone: localStorage.phone
        })
        .then(res => {
          // vuex
          this.changeUserInfo(res[0]);
        });
    }
  }
};
</script>


<style lang="scss" scoped>
.wrapper{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mine {
  width: 100%;
  &-list{
    padding-bottom:30px;
    .logout{
      margin-top:10px;
      padding:0 20px;
      width:100%;
      &-btn{

      }
    }
  }
  // height: 100%;
  &-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avatar-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      color: #fff;
      font-size: 22px;
    }
    .myinfo {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-between;
      font-size: 20px;
    }
  }
  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li{
      flex:1;
      height:100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img{
        width:26px;
        height:26px;
        margin-bottom:10px;
      }
      .common-p{
        font-size:16px;
        color:#b6b6b6;
      }
    }
    .mint-badge {
      padding: 0;
      font-size: 10px;
      height: 16px;
      line-height: 18px;
      min-width: 16px;
      background: #ff5f16;
      position: absolute;
      left: 52%;
      text-align: center;
      top: 0;
    }
  }
}
</style>
